import React, { Component } from 'react';
import { Modal, Form, message, Radio, Select, Card, Tree } from 'antd';
const { TreeNode } = Tree;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { Option } = Select;

export default class OneKeyPubLish extends Component {
    state = {
        progId: '',
    };
    onSelect = selectKeys => {
        //console.log('selectkeys', selectKeys);
        this.setState({ progId: selectKeys });
    };
    handleSet = () => {
        this.props.form.validateFields((err, values) => {
            if (!err) {
                const { dispatch } = this.props;
                const { pubScope, cityId, pubMod } = values;
                const { progId } = this.state;

                dispatch({
                    type: 'dev/oneKeyPubLish',
                    payload: { pubScope, cityId, pubMod, progId },
                    callback: () => {
                        message.success('设置一键发布成功.');
                    },
                });


                this.props.handleModalVisible(false, 'oneKeyPubLish');
            }

        });
    };

    render() {
        const { modalVisible, form, handleModalVisible, program } = this.props;
        let programlist = [];
        //console.log('program', program)
        if (program.list.length) {
            programlist = program.list.filter(item => item.progAuditStatus === 1);
        }
        return (
            <Modal
                title="一键发布"
                visible={modalVisible}
                onOk={this.handleSet}
                onCancel={() => handleModalVisible(false, 'oneKeyPubLish')}
            >
                <Form>
                    <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="选择范围">
                        {form.getFieldDecorator('pubScope', {
                            initialValue: 0,

                        })(
                            <RadioGroup>
                                <Radio value={0}>绑定设备</Radio>
                                <Radio value={1}>所有设备</Radio>
                            </RadioGroup>
                        )}
                    </FormItem>
                    <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="选择模式">
                        {form.getFieldDecorator('pubMod', {
                            initialValue: 0,

                        })(
                            <RadioGroup>
                                <Radio value={0}>批量发布</Radio>
                                <Radio value={1}>智能发布</Radio>
                            </RadioGroup>
                        )}
                    </FormItem>
                    <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="选择城市">
                        {form.getFieldDecorator('cityId', {
                            rules: [{ message: '请选择城市...' }],
                        })(
                            <Select allowClear="true" placeholder="请选择" style={{ width: '100%' }}>
                                {this.props.city.map(item => (
                                    <Option value={item.code} key={item.code}>
                                        {item.name}
                                    </Option>
                                ))}
                            </Select>
                        )}
                    </FormItem>

                    <Card title="审核节目列表（单选）" bodyStyle={{ height: 600, overflow: 'scroll' }}>
                        {programlist.length ? (
                            <Tree style={{ height: 600 }} onSelect={this.onSelect} >
                                {programlist.map(data => (
                                    <TreeNode title={data.progName} key={data.progId} />
                                ))}
                            </Tree>
                        ) : (
                                'loading tree'
                            )}
                    </Card>

                </Form>
            </Modal >
        );
    }
}
